<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<script th:inline="javascript">
    //给modal的Input隐藏域赋值
    $("#updateModal").modal("hide");
    $("#deleteModal").modal("hide");
    //给modal的数据赋初值
    function setUpdate(USER) {
        console.log(USER);
        $("#updateUserId").val(USER.userId);
        $("#updateUserName").val(USER.username);
        $("#updatePassWord").val(USER.password);
        $("#updatePhone").val(USER.phone);
        $("#updateEmail").val(USER.email);
        /*$("#deleteDid").val(DOCTOR.did);
        $("#deleteName").val(DOCTOR.name);*/
    };
    function setDelete(USER) {
        console.log(USER);
        $("#deleteUserId").val(USER.userId);
    };
    function updateUser() {
        $.ajax({
            url: '/manager/updateUser',
            data: {
                userId: $('#updateUserId').val(),
                username: $('#updateUserName').val(),
                password: $('#updatePassWord').val(),
                phone: $('#updatePhone').val(),
                email: $('#updateEmail').val()
            },
            type: 'post',
            success:function () {
                alert('修改用户'+$('#updateUserId').val()+'成功');
            },
            error:function () {
                alert('修改失败');
            }
        })
    };
    function deleteUser() {
        $.ajax({
            url:'/manager/deleteUser',
            data:{
                userId:$("#deleteUserId").val()
            },
            type:'post',
            success:function (data) {
                alert("删除用户成功");
            },
            //失败后的回调函数
            error:function (data) {
                alert("删除用户失败");
            }
        })
    }
</script>
<head>
    <meta charset="utf-8">
    <title>系统管理-用户列表</title>
    <!--取自commons里的公共static-->
    <div th:insert="~{manager/commons::publicStatic}"></div>
</head>

<body>
<!--头-->
<div th:insert="~{manager/commons::head}"></div>
<!--头-->
<div class="doc1180 paddingT20 fn-clear container">
    <div>
        <form class="form-inline">
            <div class="form-group">
                <label for="exampleInputName2">用户名</label>
                <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">状态</label>
                <select class="form-control">
                    <option>正常</option>
                    <option>冷冻</option>
                </select>
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">等级</label>
                <select class="form-control">
                    <option>学霸</option>
                    <option>学渣</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary">搜索</button>
        </form>

    </div>
    <div class="myPost_Theme" style="height: 80vh;margin-top: 50px;">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="myPost_Table">
            <tr class="myPost_Th">
                <th><input type="checkbox" name="" id="" value="" /></th>
                <th>头像</th>
                <th>用户编号</th>
                <th>角色</th>
                <th>用户名</th>
                <th>密码</th>
                <th>电子邮箱</th>
                <th>电话</th>
                <!--<th>等级</th>
                <th>状态</th>-->
                <th>操作</th>
            </tr>
            <tr th:each="user:${userList}">
                <td>
                    <input type="checkbox" name="" id="" value="" />
                </td>
                <td class="myPost_ThemeTitle">
                    <img th:src="@{/i/30x30.png}">
                </td>
                <td th:text="${user.getUserId()}">
                    用户编号
                </td>
                <td th:text="${user.getRole().getName()}">
                    角色
                </td>
                <td th:text="${user.getUsername()}">
                    用户名
                </td>
                <td th:text="${user.getPassword()}">
                    密码
                </td>
                <td th:text="${user.getEmail()}">
                    电子邮箱
                </td>
                <td th:text="${user.getPhone()}">
                    电话
                </td>
                <td>
                    <!-- 按钮：用于打开修改模态框 -->
                    <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#updateModal" th:onclick="setUpdate([[${user}]])">
                        修改
                    </button>
                    <!-- 按钮：用于打开修改模态框 -->
                    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal" th:onclick="setDelete([[${user}]])">
                        删除
                    </button>
                </td>
                <!--<td>学霸</td>
                <td>正常</td>-->
            </tr>
            <!-- 修改医师模态框 -->
            <div class="modal fade" id="updateModal">
                <div class="modal-dialog">
                    <div class="modal-content">

                        <!-- 模态框头部 -->
                        <div class="modal-header">
                            <h4 class="modal-title">修改用户信息</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>

                        <!-- 模态框主体 -->
                        <div class="modal-body">
                            <div class="">
                                <label class="bmd-label">请确认用户的登录用户名</label>
                                <input type="text" name="updateUserName" id="updateUserName" class="form-control disabled" autocomplete="off" disabled>
                            </div>
                            <div class="">
                                <label class="bmd-label-static">修改用户的登录密码</label>
                                <input type="text" name="updatePassWord" id="updatePassWord" class="form-control" autocomplete="off">
                            </div>
                            <div class="">
                                <label>修改用户的电话</label>
                                <input type="text" name="updatePhone" id="updatePhone" class="form-control" autocomplete="off">
                            </div>
                            <div class="">
                                <label>修改用户的邮箱</label>
                                <input type="text" name="updateEmail" id="updateEmail" class="form-control" autocomplete="off">
                            </div>
                        </div>
                        <input type="hidden" name="updateUserId" id="updateUserId">
                        <!-- 模态框底部 -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal" th:onclick="updateUser()">确认修改</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end modal -->
            <div class="modal fade" id="deleteModal">
                <div class="modal-dialog">
                    <div class="modal-content">

                        <!-- 模态框头部 -->
                        <div class="modal-header">
                            <h4 class="modal-title">修改用户信息</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>

                        <!-- 模态框主体 -->
                        <input type="hidden" name="deleteUserId" id="deleteUserId">
                        <!-- 模态框底部 -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal" th:onclick="deleteUser()">确认删除</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end modal -->
        </table>

        <div class="pageList" style="width: 500px;float: right;">
            <ul>

                <li>
                    <a href="###" class="pret">上一页</a>
                </li>
                <li><span>1</span></li>
                <li>
                    <a href="###">2</a>
                </li>
                <li>
                    <a href="###">3</a>
                </li>
                <li>
                    <a href="###">4</a>
                </li>
                <li>
                    <a href="###">5</a>
                </li>
                <li>
                    <a href="###">最后一页</a>
                </li>
                <li>
                    <a href="###" class="next">下一页</a>
                </li>
            </ul>
        </div>

        <div id="" class="" style="margin-top: 40px;width: 400px; float: left;">
            <a href="#" class="btn btn-success" >冷冻</a>
            <a href="#" class="btn btn-primary" >解冻</a>
            <a href="#" class="btn btn-danger">删除</a>
        </div>
    </div>

</div>

</body>

</html>